<template>
    <div class='page-content'>
        <table-bar :showTop="true" :columns="columns" @changeColumn="changeColumn">
            <div slot="top" v-if="isShowSearch">
                <el-form label-width="90px">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="状态：">
                                <el-select v-model="status" style="width:100%" placeholder="请选择状态">
                                    <el-option label="禁用" value="1"></el-option>
                                    <el-option label="正常" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="营地：">
                                <el-select v-model="camp_id" style="width:100%" placeholder="请选择营地">
                                    <el-option v-for="(item,index) in campList" :label="item.name" :value="item.id" :key="index"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :lg="6">
                            <el-form-item label="名称：">
                                <el-input v-model="word" type="text" placeholder="请输入名称" style="width:100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-row :xs="24" :sm="12" :lg="6" style="float: right; margin-right: 10px;">
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button @click="reset">重置</el-button>
                        </el-row>
                    </el-row>
                </el-form>
            </div>
            <div slot="bottom" v-if="isShowAdd">
                <el-button type="primary" plain @click="showDialog">新增</el-button>
            </div>
        </table-bar>
        <el-table :data="lists" :showPage="false" border ref="table">
            <el-table-column label="ID" width="80" prop="id" v-if="columns[0].show"/>
            <el-table-column label="名称" width="120" prop="name" v-if="columns[1].show"/>
            <el-table-column label="营地" width="120" prop="camp_name" v-if="columns[2].show"/>
            <el-table-column label="次数限制" width="120" prop="number" v-if="columns[3].show"/>
            <el-table-column label="状态" width="80" prop="status" v-if="columns[4].show">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <el-tag size="mini" type="success">正常</el-tag>
                    </template>
                    <template v-else>
                        <el-tag size="mini" type="danger">禁用</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="备注" width="100" prop="remark" v-if="columns[5].show"/>
            <el-table-column label="操作人" width="100" prop="admin_name" v-if="columns[6].show"/>
            <el-table-column label="创建时间" width="140" prop="create_time" v-if="columns[7].show"/>
            <el-table-column fixed="right" label="操作" :width="setWidth" v-if="isShowEdit || isShowDelete">
                <template slot-scope="scope">
                    <el-button type="primary" @click="updateModel(scope.row)" v-if="isShowEdit">修改</el-button>
                    <el-button type="danger" @click="deleteModel(scope.row)" v-if="isShowDelete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template v-if="allpage>10">
            <el-pagination @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-size="10"
                            layout="total, prev, pager, next, jumper"
                            :total="allpage">
            </el-pagination>
        </template>
        <el-dialog title="编辑" width="40%" :visible.sync="dvEdit" :before-close="handleClose">
            <el-form ref="model" :model="model" label-width="120px">
                <el-form-item label="名称">
                    <el-input v-model="model.name" type="text" placeholder="请输入名称" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <span style="color:red">注意：只能上传jpg/png文件，建议尺寸600*400</span>
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadImage"
                      accept=".jpg,.png"
                      name="file"
                      :show-file-list="false"
                      :on-remove="handleRemove"
                      :before-remove="beforeRemove"
                      :on-success="handleAvatarSuccess">
                        <img v-if="image" :src="image" style="width:300px;height: 200px;">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="营地">
                    <el-select v-model="model.camp_id" style="width:100%" placeholder="请选择营地">
                        <el-option v-for="(item,index) in campList" :label="item.name" :value="item.id" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简介">
                    <el-input v-model="model.intro" type="text" placeholder="请输入简介" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="是否首页显示">
                    <el-select v-model="model.is_home" style="width:100%" placeholder="请选择是否首页显示">
                        <el-option label="否" value="0"></el-option>
                        <el-option label="是" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="model.type" style="width:100%" placeholder="请选择类型">
                        <el-option label="美食" value="1"></el-option>
                        <el-option label="玩乐" value="2"></el-option>
                        <el-option label="住宿" value="3"></el-option>
                        <el-option label="攻略" value="4"></el-option>
                    </el-select>
                </el-form-item>
                <template v-if="model.type != 4">
                    <el-form-item label="轮播图">
                        <span style="color:red">注意：只能上传jpg/png文件，建议尺寸750*530</span>
                        <el-upload
                        enctype="multipart/form-data"
                        class="upload-demo"
                        :action="uploadImage"
                        accept=".jpg,.png"
                        name="file"
                        :limit="10"
                        multiple
                        :file-list="carousel_image"
                        :on-remove="moreHandleRemove"
                        :http-request="uploadFile"
                        list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M,宽度750</div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="是否开启预定">
                        <el-select v-model="model.is_start_reserve" style="width:100%" placeholder="请选择是否开启预定">
                            <el-option label="否" value="0"></el-option>
                            <el-option label="是" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提前预约天数">
                        <el-input v-model="model.advance_day_num" type="number" placeholder="请输入提前预约天数" style="width:100%"></el-input>
                    </el-form-item>
                    <template v-if="model.is_start_reserve == 1">
                        <el-form-item label="规格">
                            <div>
                                <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleCloseTag(tag)">
                                    <span @click="tagShow(tag)">{{tag}}</span>
                                </el-tag>
                                <template>
                                    <el-input
                                            class="input-new-tag"
                                            v-if="inputVisible"
                                            v-model="inputValue"
                                            ref="saveTagInput"
                                            size="small"
                                            @keyup.enter.native="handleInputConfirm"
                                            @blur="handleInputConfirm"
                                            style="width: 100px"
                                    ></el-input>
                                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 规格</el-button>
                                </template>
                            </div>
                            <div>
                                <template v-if="skuList.length>0">
                                    <el-table :data="skuList" ref="table" style="width: 100%">
                                        <el-table-column fixed type="index" width="20"></el-table-column>
                                        <el-table-column prop="name" label="名称" width="100"></el-table-column>
                                        <el-table-column prop="price" label="价格" width="100">
                                            <template slot-scope="scope">
                                                <el-input type="number" v-model="scope.row.price"></el-input>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </div>
                        </el-form-item>
                        <el-form-item label="显示价格描述">
                            <el-input v-model="model.show_price" type="text" placeholder="请输入显示价格描述" style="width:100%"></el-input>
                        </el-form-item>
                    </template>
                </template>
                <el-form-item label="详情">
                    <quill-editor class="editor" ref="quillEditor" v-model="model.detail" :options="editorOption"/>
                </el-form-item>
                <el-form-item label="排序值">
                    <el-input v-model="model.order_num" type="number" placeholder="请输入排序值" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="model.remark" type="text" placeholder="请输入备注" style="width:100%"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="model.status" style="width:100%" placeholder="请选择状态">
                        <el-option label="禁用" value="0"></el-option>
                        <el-option label="正常" value="1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dvEdit = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="dialogBigVisible" width="60%">
            <img :src="bigSrc" style="width:100%;display: block">
        </el-dialog>
        <el-dialog title="规格修改" :visible.sync="dialogVisible" width="30%">
            <el-form :model="model" label-width="80px" class="demo-ruleForm">
                <el-form-item label="规格名称">
                    <el-input v-model="sku_name" placeholder="请输入规格名称" style="width: 100%"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateSkuName">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
    import {getCampServiceList,editCampService,deleteCampService,getLoadButtonIsShow} from '@/api/camp/campServiceApi';
    import {getCampListAll} from '@/api/camp/campApi';
    import {uploadImageUrl} from "@/utils/config.js";
    import axios from "axios";
    import quillConfig from "@/utils/quill-config.js";
    import {quillEditor} from 'vue-quill-editor';
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import '@/config/quill/quill.scss';

export default {
    components: {
        quillEditor
    },
    data() {
        return {
            lists: [],
            allpage: 1,//总页数
            showItem: 5,//分页显示得中间按钮个数
            current: 1,//当前页
            status: '',
            isShowAdd:false,
            isShowEdit:false,
            isShowDelete:false,
            isShowSearch:false,
            setWidth:0,
            model: {},
            dvEdit: false,
            editorOption: quillConfig,
            dialogBigVisible: false,
            bigSrc: '',
            uploadImage: uploadImageUrl,
            carousel_image: [],
            campList:[],
            image: '',
            dynamicTags:[],
            skuList:[],
            dialogVisible:false,
            sku_name:'',
            old_sku_name:'',
            inputVisible:false,
            inputValue:'',
            camp_id:'',
            word:'',
            columns: [
                {name: "ID", show: true},
                {name: "名称", show: true},
                {name: "图片", show: true},
                {name: "营地", show: true},
                {name: "首页显示", show: true},
                {name: "简介", show: true},
                {name: "类型", show: true},
                {name: "开启购买?", show: true},
                {name: "显示价格描述", show: true},
                {name: "状态", show: true},
                {name: "销量", show: true},
                {name: "排序值", show: true},
                {name: "备注", show: true},
                {name: "操作人", show: true},
                {name: "创建时间", show: true},
            ],
        };
    },
    created: function () {
        this.loadButtonAuth();
        this.handleCurrentChange(1);
        this.getCampList();
    },
    methods: {
        getCampList:function(){
            getCampListAll().then(res => {
                this.campList = res.data.lists;
            })
        },
        clickBig: function (img) {
            this.bigSrc = img;
            this.dialogBigVisible = true;
        },
        loadButtonAuth: function () {
            getLoadButtonIsShow({
                path: this.$route.path,
            }).then(res => {
                this.isShowAdd = res.data.isShowAdd;
                this.isShowEdit = res.data.isShowEdit;
                this.isShowDelete = res.data.isShowDelete;
                this.isShowSearch = res.data.isShowSearch;
                this.isShowExport = res.data.isShowExport;
                this.setWidth = res.data.setWidth;
            })
        },
        handleCurrentChange: function (index) {
            this.current = index;
            getCampServiceList({
                page: index,
                status: this.status,
                camp_id:this.camp_id,
                word:this.word
            }).then(res => {
                this.lists = res.data.lists;
                this.allpage = res.data.allpage;
            })
        },
        showDialog: function () {
            this.model = {};
            this.carousel_image = [];
            this.image = '';
            this.dynamicTags = [];
            this.skuList = [];
            this.dvEdit = true;
        },
        updateModel: function (row) {
            this.model = row;
            this.carousel_image = [];
            for (let i = 0;i<row.carousel_image.length;i++){
                let item = {
                    'url': row.carousel_image[i],
                    'uid': Math.random(10000, 99999),
                }
                this.carousel_image.push(item);
            };
            this.image = row.image;
            this.dynamicTags = [];
            if(!!row.sku_info && row.sku_info.properties.length > 0){
                this.dynamicTags = row.sku_info.properties;
            }
            this.skuList = [];
            if(!!row.sku_info && row.sku_info.sku.length > 0){
                this.skuList = row.sku_info.sku;
            }
            this.dvEdit = true;
        },
        reset: function () {
            this.status = '';
            this.camp_id = '';
            this.word = '';
        },
        search: function () {
            this.handleCurrentChange(1);
        },
        handleClose: function (done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                    .catch(_ => {
                });
        },
        changeColumn(columns) {
            this.columns = columns;
            this.$refs.table.doLayout()
        },
        onSubmit: function () {
            let sku_info = {
                'properties':this.dynamicTags,
                'sku':this.skuList
            };
            editCampService({
                id: this.model.id,
                remark: this.model.remark,
                status: this.model.status,
                name: this.model.name,
                image: this.image,
                sale_num: this.model.sale_num,
                camp_id: this.model.camp_id,
                order_num: this.model.order_num,
                detail: this.model.detail,
                is_home: this.model.is_home,
                intro: this.model.intro,
                sku_info: sku_info,
                type: this.model.type,
                is_start_reserve: this.model.is_start_reserve,
                show_price: this.model.show_price,
                carousel_image: this.carousel_image,
                advance_day_num:this.model.advance_day_num
            }).then(res => {
                if (res.code === 1) {
                    this.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    this.dvEdit = false;
                    this.handleCurrentChange(this.current);
                }
            })
        },
       deleteModel: function (row) {
            this.$confirm("您确认要删除该条数据?", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                deleteCampService({
                    id: row.id,
                }).then(res => {
                    if (res.code === 1) {
                        this.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        this.handleCurrentChange(this.current);
                    }
                })
            }).catch(() => {
            })
        },
        handleAvatarSuccess: function (res, file) {
            this.image = res.data.src;
        },
        handleRemove: function (file, fileList) {
            this.image = '';
        },
        beforeRemove: function (file, fileList) {
            this.image = '';
        },
        moreHandleRemove: function (file,fileList) {
            this.carousel_image = fileList;
        },
        uploadFile:function(file){
            var fm = new FormData();
            fm.append('file', file.file);
            axios.post('/uploadCommon/uploadImageOss',fm).then(res=>{
                var arr = {
                    'url': res.data.data.src,
                    'uid': file.file.uid,
                };
                this.carousel_image.push(arr);
            })
        },
        handleInputConfirm() {
            let inputValue = this.inputValue.trim();
            if(this.dynamicTags.indexOf(inputValue) > -1){
                this.inputVisible = false;
                this.inputValue = '';
                this.$message.error('已存在相同规格名称');
            }else{
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                    var item = {
                        'name':inputValue,
                        'price':'',
                    };
                    this.skuList.push(item);
                }
                this.inputVisible = false;
                this.inputValue = '';
            }
        },
        handleCloseTag(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            for (let i = 0;i<this.skuList.length;i++){
                if(this.skuList[i].name == tag){
                    this.skuList.splice(i, 1);
                }
            }
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        tagShow:function(tag){
            console.log(tag);
            this.sku_name = tag;
            this.old_sku_name = tag;
            this.dialogVisible = true;
        },
        updateSkuName:function(){
            for (var i = 0;i<this.dynamicTags.length;i++){
                if(this.dynamicTags[i] == this.old_sku_name){
                    this.dynamicTags[i] = this.sku_name;
                    this.skuList[i].name = this.sku_name;
                }
            }
            this.dialogVisible = false;
        },
    },
}
</script>

<style lang='scss' scoped>
.page-content {
    width: 100%;
    height: 100%;
    .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

input[type='file'] {
    display: none;
}
.el-tag + .el-tag {
    margin-left: 10px;
}
</style>

